<template>
  <div ref="chartDiv" :style="currStyle"></div>
</template>

<script setup>
import {ref, watch, onMounted, nextTick, markRaw} from 'vue';
import * as echarts from "echarts";
import visual from "@/visual/js/visual";
import JSON5 from 'json5';

const props = defineProps({
  node: Object,
  compStyle: Object,
  compData: Object,
  inputParam: Object
});

const currNode = ref(props.node);
const chartDiv = ref();
const currChart = ref(null);
const currStyle = ref();

const init = async() => {
  if (currNode.value.compData.dataSourceType === '') {
    currNode.value.compData.dataSourceType = '静态数据';
  }
  const compStyle = props.compStyle || {};
  let style = '';
  style += visual.parseTpl('width: {value};', compStyle['width']);
  style += visual.parseTpl('height: {value};', compStyle['height']);
  currStyle.value = style;
  let defaultOption = {};
  try {
    defaultOption = JSON5.parse(compStyle['jsonOption'] || '{}');
  } catch (e) {
    console.log("jsonOption解释出错", e)
  }
  const dataList = (await visual.loadData(
    props.compData,
    {},
    {inputParam: props.inputParam},
    currNode.value)).data || [];
  currNode.value.compData.dataList = JSON.stringify(dataList);
  const data = dataList.length > 0 ? dataList[0] : {};
  const gaugeData = [{
    value: data['百分比'] || 0,
    name: `{a|${data['显示值']}}`
      + (data['标题'] ? `{b|${('\n' + data['标题'])}}` : '')
  }];

  const option = {
    color: [compStyle['progressColor'] || '#5470c6'],
    series: [
      {
        type: 'gauge',
        startAngle: 90,
        endAngle: -270,
        pointer: {
          show: false
        },
        progress: {
          show: true,
          overlap: false,
          roundCap: true,
          clip: false,
        },
        axisLine: {
          lineStyle: {
            width: compStyle['borderWidth'] || 8,
            color: [
              [1, compStyle['borderColor'] || 'rgba(0, 0, 0, 0.1)'],
            ]
          }
        },
        splitLine: {
          show: false,
          distance: 0,
          length: 10
        },
        axisTick: {
          show: false
        },
        axisLabel: {
          show: false,
          distance: 10
        },
        data: gaugeData,
        title: {
          show: true,
          offsetCenter: ['0%', '5%'],
          rich: {
            a: {
              color: compStyle['series.value.color'] || 'inherit',
              fontSize: compStyle['series.value.fontSize'] || 14,
              fontFamily: compStyle['series.value.fontFamily'],
              fontWeight: compStyle['series.value.fontWeight'],
              lineHeight: compStyle['series.value.fontSize'] || 14
            },
            b: {
              color: compStyle['series.title.color'] || 'inherit',
              fontSize: compStyle['series.title.fontSize'] || 14,
              fontFamily: compStyle['series.title.fontFamily'],
              fontWeight: compStyle['series.title.fontWeight'],
              lineHeight: compStyle['series.value.fontSize'] || 14
            }
          }
        },
        detail: {
          show: false,
        }
      }
    ]
  };

  await nextTick(() => {
    try {
      if (currChart.value) {
        echarts.dispose(chartDiv.value);
      }
      currChart.value = markRaw(echarts.init(chartDiv.value));
      currChart.value.setOption(Object.assign({}, option, defaultOption));
    } catch (e) {
      console.log(e);
    }
  });
  await nextTick(() => currChart.value.resize());
};

watch(() => props.compStyle, () => {
  init();
}, {deep: true});

watch(() => props.compData?.refresh, () => {
  init();
});

onMounted(() => {
  init();
});
</script>